<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel=stylesheet type="text/css" href="Public/js/menu/style.css" />
<style>
.hdiv{
	width:900px;
	height:100px;
	margin:0 auto;
	text-align:center;
	padding-top:5px;
	border-left:1px dotted #B3B3A9;
	border-right:1px dotted #B3B3A9;
}
.htable{
	border-spacing:0px;
	border-collapse:0px;
	width:100%;
	font-size:13px;
	color:#747566;
}
ui li{
	list-style-type:none;
}
.menu1{
	width:600px;
	
}
.menu ui li{
	float:left;
	height:30x;
	/*line-height:30px;*/
	font-weight:bold ;
	margin:0 5px;
}
.titlediv{
	
	font-size:13px;
	color:#fff;
	height:40px;
}
.titlediv a{
	font-size:1em;
	color:#fff;
}

.titlediv A:link {
    color: #fff;
    text-decoration: none;
}
.titlediv A:visited {
    color: #fff;
    text-decoration: none;
}
.titlediv A:hover {
    color: #fff;
    text-decoration: underline;
}
.titlediv A:active {
    color: #fff;
    text-decoration: none;
}
.menu li{
	list-style-type:none;
}
.menu li a span{
	padding-top:30px;
}
</style>
<literal>
<script type="text/javascript">
$(function(){
	//menuSlider.init('menu','slide');
	/*$(".menu li").bind("mouseover",function(){
		var w=$(this).width();
		var p=$(this).position();
		p=p.left;
		//$("#slide").css({"width":w+"px","left":p+"px"});
		$("#slide").slideDown("fast",function(){
			$("#slide").css({"width":w+"px","left":p+"px"});
		}); 
	});
	*/
	$(".menu div a").bind("mouseover",function(){
		var w=$(this).width();
		var h=$(this).height();
		var p=$(this).position();
		p=p.left;
		//$("#slide").css({"width":w+"px","left":p+"px"});
		$("#slide").slideDown("fast",function(){
			$("#slide").css({"width":"1px","left":p+"px","height":"18px"});
		}); 
	});
	$(".menu div a").bind("mouseleave",function(){
		var w=$(this).width();
		var h=$(this).height();
		var p=$(this).position();
		p=p.left;
		//$("#slide").css({"width":w+"px","left":p+"px"});
		$("#slide").slideDown("fast",function(){
			$("#slide").css({"width":"0px","height":"0px"});
		}); 
	});
	
	var num=$("#currenMenu").val();
	if(num){
		var mob=$("#menudiv_"+num+" a");
		var p=mob.position();
		p=p.left;
		//{position:absolute; bottom:0; height:1px; background:#FCF302; z-index:100
		$("#slide_"+num).css({"width":"1px","left":p+"px","height":"18px","position":"absolute","background":"#FCF302","z-index":100,"bottom":0});
	}
	
});
</script>
</literal>
<div>
<div class="titlediv">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="" width="24.8%">
</td>

<td align="left" width="75.2%">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><a href="?m=Index&a=index"><img style="border:0px" src="Public/image/banner.jpg" align="absmiddle"></a></td>
<td>
<a href="?m=Index&a=language&lan=zh-cn&url=cp">中文</a>&nbsp;&nbsp;
<a href="?m=Index&a=language&lan=en&url=cp">English</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>

</div>
<div >
	<table class="htable" border="0" cellspacing="0" cellpadding="0" width="100%">
		<tr>
			<td valign="top" width="24%" align="right">
				
			</td>
			<td vlign="top" width="76%" align="left">
				
				<div>
					<div class="menu menu1">
					<table border="0">
						<tr>
							<volist name="menu" id="vo">
								<td valign="bottom">
								<div id="slide1" style="width:1px;height:18px"></div>
								<div style="height:18px;padding-top:20px;" id="menudiv_{$vo['m_id']}" ><a  href="{$vo['url']}"><span style="font-size:13px;">{$vo['name']}</span></a></div>
								</td>
							</volist>
						</tr>
					</table>
					
					<div id="slide"></div>
					<volist name="menu" id="vo">
					<div id="slide_{$vo['m_id']}"></div>
					</volist>
					<input type="hidden" id="currenMenu" value="{$mNum|default=1}">
					</div>
				</div>
			</td>
		</tr>
	</table>
	</div>
</div>

